<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    /* 超链接相关，以下四种选择器顺序不能改变 */
        /* 修改a标签点击前样式，只对a标签起效果 */
        a:link{
            color: aqua;
        }
        /* 修改a标签点击后样式，只对a标签起效果 */
        a:visited{
            color: yellowgreen;
        }
        /* 鼠标悬停 */
        a:hover{
            color: crimson;
        }
        .box{
            height: 200px;
            width: 200px;
            background-color: blue;
        }
        .box:hover{
            background-color: pink;
        }
        /* 激活状态 */
        a:active{
            color: aliceblue;
        }
        .box:active{
            background-color: aquamarine;
        }
    /* 匹配父元素中的第一个子元素 */
        ul li:first-child{
            color: burlywood;
        }
    /* 匹配父元素中的最后一个子元素 */
        ul li:last-child{
            color: blueviolet;
        }
    /* 匹配父元素中的第n个子元素，n可以为表达式，数字或文字描述 */
        .ul1 li:nth-child(odd){
            color: sandybrown;
        }
        .ul1 li:nth-child(2n){
            color: blanchedalmond;
        }
        .ul1 li:nth-child(6){
            color: gray;
        }
    </style>
    
</head>
<body>
    
    <a href="https://www.baidu.com">a标签</a>
    <a href="https://bing.com">a标签</a>
    <a href="#">top</a>

    <div class="box"></div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
    </ul>
    <ul class="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
    </ul>
</body>
</html>